<template>
  <div class="preview-wrapper">
    <div class="preview-header">
      <div class="preview-header-left">
        <div class="preview-header-left-btn" @click="handleBack">
          <i class="iconfont icon-fanhui"></i>
          <span>{{$t('common.base.back')}}</span>
        </div>
        <div class="preview-header-left-tip">
          <i class="iconfont icon-warning-circle-fill"></i>
          <span>{{$t('goods.preview.previewPage')}}</span>
        </div>
      </div>
      <div class="preview-header-tabs">
        <div class="preview-header-tabs-item">
          <i class="iconfont icon-mobile"></i>
          {{$t('common.base.mobilePhone')}}
        </div>
      </div>
    </div>

    <div class="preview-main">
      <div class="preview-main-mobile">
        <div class="preview-main-mobile-left">
          <iframe
            id="mobile-view-frame"
            :src="url"
            frameborder="0"
            style="width: 100%; height: 100%"
          ></iframe>
        </div>
        <div class="preview-main-mobile-right" v-if="url">
          <div>
            <i class="iconfont icon-weixin5"></i>
            <span>{{$t('goods.preview.scanningCodePurchase')}}</span>
          </div>
          <div id="qrcodeImg" ref="qrcodeImg"></div>
          <span>{{$t('goods.preview.weChatBuy')}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from '@src/util/querystring';
import QRCode from 'qrcodejs2';
import { getCommodityPreviewUrl } from '@src/api/PortalApi.ts';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from '@model/enum/PageRoutesEnum';

export default {
  data() {
    return {
      url: '',
    };
  },
  computed: {
    queryObject() {
      return qs.parse(window.location.search) || {};
    },
    goodsId() {
      return this.queryObject?.id ?? '';
    },
    commodityName() {
      return this.queryObject?.commodityName ?? '';
    },
    from() {
      return this.queryObject?.from ?? 'list';
    },
  },
  mounted() {
    this.getCommodityPreviewUrl();
  },
  methods: {
    async getCommodityPreviewUrl() {
      try {
        this.orderCorrelationServiceList = [];
        const { code, data } = await getCommodityPreviewUrl({
          id: this.goodsId,
        });

        if (code !== '200' || !data) return;

        this.url = `${data}&source=pc`;
        this.$nextTick(() => {
          this.handleRenderQRcode(data);
        });
      } catch (error) {
        console.error('getCommodityPreviewUrl error', error);
      }
    },
    handleRenderQRcode(url) {
      new QRCode('qrcodeImg', {
        width: 142,
        height: 142,
        text: url,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    handleBack() {
      let id = window.frameElement.dataset.id;
      this.$platform.closeTab(id);

      if (this.from === 'list') {
        openAccurateTab({
          type: PageRoutesTypeEnum.PageLinkcGoodsList,
          key: this.goodsId,
        });
      } else {
        openAccurateTab({
          type: PageRoutesTypeEnum.PageGoodsDetail,
          key: this.goodsId,
          titleKey: ` - ${this.commodityName}`,
          params: `id=${this.goodsId}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.preview-wrapper {
  width: 100%;
  height: 100vh;
  background-color: rgb(236, 240, 245);

  .preview-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0px 24px;
    color: rgb(255, 255, 255);
    background: linear-gradient(
      270deg,
      rgb(31, 219, 183) 0%,
      rgb(18, 193, 214) 100%
    );

    &-left {
      position: absolute;
      left: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-btn {
        height: 48px;
        line-height: 48px;
        padding-right: 12px;
        margin-right: 12px;
        cursor: pointer;
        border-right: 1px solid rgb(245, 245, 245);

        i {
          margin-right: 8px;
        }
      }

      &-tip {
        i {
          margin-right: 8px;
          color: rgb(250, 173, 20);
          font-size: 14px;
        }
      }
    }

    &-tabs {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;

      &-item {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgb(255, 255, 255);
        cursor: pointer;
        height: 48px;
        position: relative;
        width: 168px;
        background: rgba(0, 0, 0, 0.1);

        i {
          margin-right: 6px;
        }
      }
    }
  }

  .preview-main {
    padding: 12px;
    display: flex;
    justify-content: center;
    height: calc(100% - 48px);
    padding-top: 33px;

    &-mobile {
      display: flex;
      justify-content: center;

      &-left {
        width: 415px;
        height: 100%;
        position: relative;
        padding: 37px 20px 48px 20px;
        background: url('../../../../assets/img/phone_icon.png') center 0px /
          100% 100% no-repeat;
      }

      &-right {
        width: 212px;
        min-height: 244px;
        background-color: rgb(255, 255, 255);
        border-radius: 4px;
        margin: 5px 0 0 12px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        color: #595959;

        div {
          color: #52c41a;

          i {
            font-size: 18px;
            margin-right: 8px;
          }
        }

        #qrcodeImg {
          margin: 12px 0;
        }
      }
    }
  }
}
</style>
